<template>
  <div class="c-minh c-pb20 c-bg-sgray" @click="showTypes = false">
    <div class="fixTop">
      <new-search-bar @search="startSearch" @cancel="startSearch"></new-search-bar>
      <div class="c-ph24 c-flex-row c-justify-sb c-pv20 c-bg-white c-p">
        <div class="c-fs22 c-fc-xblack">共含{{prodCount}}个内容</div>
        <div class="c-flex-row c-aligni-end">
          <div class="c-fs26 c-fc-sblack iconfont c-lh" v-show="styleType == 1" @click="changeStyleType(2)">&#xe98a;</div>
          <div class="c-fs26 c-fc-sblack iconfont c-lh" v-show="styleType == 2" @click="changeStyleType(1)">&#xe989;</div>
          <div v-if="enableShow" :class="enableProdTypeSelect && typeArr.length > 0 ?'c-pr64 selectIcon_b':''" class="c-fs22 c-fc-xblack c-pl64 c-p selectIcon_a c-flex-row c-flex-center">
            <span @click="handleClickSelectCourse()">分组</span>
            <span class="iconfont c-fs16 c-vcAlign-middle c-ml10">&#xe6a9;</span>
          </div>
          <div v-if="enableProdTypeSelect && typeArr.length > 0" @click.stop="showType" :class="!enableShow ? 'c-p c-pl64 selectIcon_a':''" class="c-fs22 c-fc-xblack c-flex-row c-flex-center">{{selectedName}}<span class="iconfont c-fs16 c-vcAlign-middle c-ml10">&#xe6a9;</span></div>
          <div v-if="enableProdTypeSelect && typeArr.length > 0 && showTypes" class="c-pa c-pv12 c-box-shadow3 c-p-r24 c-p-t64 c-ww180 c-br6 c-bg-white c-maxh400 c-pz1 c-contexty-scroll">
            <div @click.stop="selectProdType(item.typeId, index)" v-for="(item, index) in typeArr" :key="index" :class="item.typeId == selectedType ? 'theme-fc' : 'c-fc-xblack'" class="c-fs22 c-textAlign-c c-pv12">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <section class="c-bg-white c-ph24 c-pb20 c-pt120" v-show="courseList.length > 0 && styleType == 1">
      <div
        class="c-flex-row c-pt50"
        v-for="(item,index) in courseList"
        :key="index"
        @click="clickDetailItem(item)"
      >
        <div class="c-ww180 c-flex-shrink0 c-p c-br10 c-bd1-xsgray c-text-hidden">
          <template v-if="item.prodType == 10">
            <div class="c-w100 c-maxh270 c-center">
              <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
              <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.prodAvatar, require('@/assets/no_chat_img.png'))" alt="" />
              <div class="c-br8 c-fs18 c-fc-white c-ph6 c-lh28 c-textAlign-c c-inlineblack c-translucent-balck60 c-p-b8 c-p-r8 c-pa">社群</div>
            </div>
          </template>
          <template v-else-if="item.prodType == 8">
            <div class="c-w100 c-maxh270 c-center">
              <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
              <img class="c-w100 c-h imgCloseBig c-br10" :src="$addXossFilter(item.prodAvatar, require('@/assets/i/wap/datum/datumsDefault.png'))" alt="" />
              <div class="c-br8 c-fs18 c-fc-white c-ph6 c-lh28 c-textAlign-c c-inlineblack c-translucent-balck60 c-p-b8 c-p-r8 c-pa">资料</div>
            </div>
          </template>
          <template v-else>
            <div class="c-w100 c-maxh270">
              <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.prodAvatar,require('@/assets/defult270.png'))" alt="" />
              <div class="c-pa c-p-b8 c-p-r8 c-inlineblack">
                <div class="c-br8 c-fs18 c-fc-white c-ph6 c-hh28 c-textAlign-c c-block c-translucent-balck60">{{prodNameMap[Number(item.prodType)]}}</div>
              </div>
              <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
              <template v-if="item.prodType == 115">
                <div v-if="item.detailInfo.limitNum-item.detailInfo.saleNum<=0" class="c-pa c-p-b0 c-p-l0 c-pz1 c-flex-row c-translucent-balck60 c-w100 c-p-t0">
                  <img src="../../../assets/i/wap/course/buynone.png" alt="" class="c-ww80  c-hh80 c-pa c-p-tp50 c-p-r0 c-p-l0 c-pz1 c-center c-mt-40" />
                </div>
              </template>
            </div>
          </template>
        </div>
        <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1 c-ml20">
          <div class="c-fs24 c-lh28 c-flex-row c-aligni-end c-text-ellipsis2 c-fc-xblack" v-if="item.prodType != 142">
            <span v-if="item.prodType == 7" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</span>
            <span v-if="item.prodType == 78" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</span>
            <span v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">{{item.detailInfo.enrollCount | formatNumber}}次预约</span>
            <span v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-mr10">更新中</span>
            <span>{{item.prodName}}</span>
          </div>
          <div class="theme-fc c-justify-sb c-flex-row c-aligni-center">
            <!-- 视音频图文 -->
            <template v-if="item.prodType == ckFrom.video || item.prodType == ckFrom.voice || item.prodType == ckFrom.imgText">
              <span class="c-fs22" v-if="item.detailInfo.isSaleOnly != 1">关联售卖</span>
              <template v-else>
                <div class="c-flex-row c-aligni-end c-pr10 c-fs24">
                  <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                    <span v-if="item.detailInfo.payType==2">{{'￥' | iosPriceFilter}}</span>
                    <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, ckFrom.course, item.detailInfo.optimal, 'index')}}</span>
                    <span class="c-fs20" v-if="(item.prodType == 110 || item.prodType == 111) && item.detailInfo.payType == 2 && item.previewLabel">/{{item.prodType == 110 ? '支持试看' : '支持试听'}}</span>
                  </span>
                  <span class="c-fs22" v-if="item.detailInfo.hasCourse > 0">{{item.detailInfo.isUpdating == 1 ? '/含' : '/共'}}{{item.detailInfo.hasCourse}}节</span>
                </div>
              </template>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="item.prodType == 111 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5)))">{{item.detailInfo.plays | formatNumber}}人收听</div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-else-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(5))">{{item.detailInfo.plays | formatNumber}}人观看</div>
            </template>
            <!-- 专栏、知识套餐、约课 -->
            <template v-if="item.prodType == ckFrom.column || item.prodType == ckFrom.package || item.prodType == ckFrom.reservation">
              <div class="c-fs24">
                <template v-if="item.detailInfo.isSaleOnly == 0 && item.detailInfo.isSaleTogether == 1">
                  <span class="c-fs22">关联售卖</span>
                </template>
                <template v-else>
                  <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                    <span v-if="item.detailInfo.payType==2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                  </span>
                </template>
              </div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="(item.prodType == 53) && Number(item.detailInfo.price) != 0 && item.detailInfo.isShowOrder == 1">{{item.detailInfo.orderCount | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="(item.prodType == 9) && item.detailInfo.payType==2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9)))">{{item.detailInfo.initSales | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="(item.prodType == 61) && item.detailInfo.payType==2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{item.detailInfo.sales | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="(item.prodType == 9) && item.detailInfo.payType!=2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(9)))">{{item.detailInfo.clicks | formatNumber}}人观看</div>
              <div class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray" v-if="(item.prodType == 61) && item.detailInfo.payType!=2 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(61)))">{{item.detailInfo.visits | formatNumber}}人观看</div>
            </template>
            <!-- 训练营、打卡 -->
            <template v-if="item.prodType == ckFrom.camp || item.prodType == ckFrom.clockIn">
              <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
              </span>
              <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType))" class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray">{{item.prodType == 78 ? item.detailInfo.people : item.detailInfo.hasMan}}人参与</div>
            </template>
            <!-- 活动 -->
            <template v-if="item.prodType == ckFrom.activity">
              <div class="c-fs24" v-if="item.detailInfo.price && item.detailInfo.isShowPrice == 1 && !$isWxAppIos()">
                <span class="c-fs24" v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1] || Number(item.detailInfo.price.split('~')[0]) !=0">{{'￥' | iosPriceFilter}}
                  <span v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1]">{{item.detailInfo.price.split('~')[0]}}起</span>
                  <span v-else>{{item.detailInfo.price.split('~')[1]}}</span>
                </span>
                <span class="c-fs22" v-if="item.detailInfo.price.split('~')[0]==item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0])==0)">免费</span>
              </div>
              <div v-if="item.detailInfo.isShowEnroll == 1" class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray">{{item.detailInfo.enrollTicket}}人已报名</div>
            </template>
            <!-- 公开课、直播间 -->
            <template v-if="item.prodType == ckFrom.live || item.prodType == ckFrom.personalLive">
              <div v-if="item.detailInfo.isSaleOnly == 0" class="c-fs22">关联售卖</div>
              <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                <span class="c-fs20" v-if="(item.prodType == 51 || item.prodType == 180) && item.detailInfo.payType == 2 && item.detailInfo.isWatchTime">/支持试看</span>
              </div>
              <div class="c-fs20" :class="item.detailInfo.status == 0 ? 'c-fc-xlred' : (item.detailInfo.status == 1 ? 'c-fc-green' : (item.detailInfo.status == 2 ? 'c-fc-xlyellow' : 'c-fc-sgray'))">{{item.prodType == 51?statusMap[item.detailInfo.status]:item.prodType == 180&&item.detailInfo.status==1?statusMap[item.detailInfo.status]:''}}</div>
            </template>
            <!-- 小班课 -->
            <template v-if="item.prodType == ckFrom.privateClass">
              <div v-if="(item.detailInfo.payType == 1 && item.detailInfo.price * 1 == 0)||item.detailInfo.payType == 4" class="c-fs22">{{item.detailInfo.payType == 4?"审核参与":"免费"}}<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
              <div v-else-if="item.detailInfo.payType == 3" class="c-fs22">加密<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
              <div v-else class="c-fs24">{{'￥' | iosPriceFilter}}{{item.detailInfo.price}}<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
              <div v-if="item.detailInfo && item.detailInfo.isHideLimit != 1" class="c-flex-grow1 c-fs20 c-lh28 c-w0 c-textAlign-r c-fc-gray">剩{{item.detailInfo.limitNum-item.detailInfo.saleNum}}名额</div>
            </template>
            <!-- 社群 -->
            <template v-if="item.prodType == ckFrom.social">
              <div v-if="item.detailInfo.isSaleOnly == 0" class="c-fs22">关联售卖</div>
              <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
              </div>
              <div class="c-fs20" v-if="socialRoomConfs.isShowPeopleNumber==1">{{item.detailInfo.number}}个群成员</div>
            </template>
            <!-- 测评 -->
            <template v-if="item.prodType == ckFrom.exam">
              <div class="theme-fc c-mt5">
                <div class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly != 1">关联售卖</div>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </div>
              </div>
              <span class="c-flex-grow1 c-textAlign-r">
                <span class="c-fs20 c-w0 c-fc-gray">考试{{item.detailInfo.hasPaper}}套</span>
                <span class="c-fc-gray c-fs20">&nbsp;|&nbsp;</span>
                <span class="c-fs20 c-fc-gray" v-if="!item.detailInfo.showTime">{{item.detailInfo.payType==2 ? setIosText():'已测'}}{{item.detailInfo.subscribers}}</span>
                <span class="c-fs20 c-fc-gray" v-if="item.detailInfo.showTime">{{item.detailInfo.time}}</span>
              </span>
            </template>
            <!-- 测评考试 -->
            <template v-if="item.prodType == ckFrom.testpPaper">
              <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb">
                <div class="c-flex-row c-aligni-center c-mb12">
                  <span class="c-fs18 c-ph8 c-pv2 c-lh-n theme-bg-10 c-fc-white c-br4 c-mr8 c-p c-vcAlign-middle c-mr10" v-if="item.detailInfo.enableDayPractice==1">
                    <span class="theme-fc c-fs18">每日一练</span>
                    <span class="c-pa prodType-triangle"></span>
                  </span>
                </div>
                <div class="c-flex-row c-fs20">
                  <div class="theme-fc c-flex-grow1">
                    <div class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</div>
                    <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                      <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                    </div>
                  </div>
                  <span class="c-fs20 c-fc-gray">{{item.detailInfo.type==2?'小测试':'考试'}} | {{item.detailInfo.joinNumber}}人参与</span>
                </div>
              </div>
            </template>
            <!-- 练习 -->
            <template v-if="item.prodType == ckFrom.itemBank">
              <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb">
                <div class="c-flex-row c-fs20">
                  <div class="theme-fc c-flex-grow1">
                    <div class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</div>
                    <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                      <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                    </div>
                  </div>
                  <span class="c-fs20 c-fc-gray c-lh ">练习 | 内含{{item.detailInfo.questionNum}}题</span>
                </div>
              </div>
            </template>
            <!-- 语音测评 -->
            <template v-if="item.prodType == ckFrom.voiceTest">
              <div class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</div>
              <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
              </div>
              <div class="c-fs20 c-fc-gray" v-if="item.detailInfo.payType == 2 && Number(item.detailInfo.price) != 0">{{setIosText()}}{{item.detailInfo.subscribers | formatNumber}}</div>
              <div class="c-fs20 c-fc-gray" v-else>已测{{item.detailInfo.hasTestNum | formatNumber}}</div>
            </template>
            <!-- 交互测评 -->
            <template v-if="item.prodType == ckFrom.mutuaTest">
              <div class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</div>
              <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
              </div>
              <div class="c-fs20 c-fc-gray" v-if="item.detailInfo.payType == 2 && Number(item.detailInfo.price) != 0">{{setIosText()}}{{item.detailInfo.subscribers | formatNumber}}</div>
              <div class="c-fs20 c-fc-gray" v-else>已测{{item.detailInfo.hasTestNum | formatNumber}}</div>
            </template>
            <!-- 资料 -->
            <template v-if="item.prodType == ckFrom.datum">
              <span class="c-flex-grow1 c-fs22 c-w0" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
              <span class="c-flex-grow1 c-fs22 c-w0" v-else-if="item.detailInfo.permission == 19">免费</span>
              <div v-else class="c-flex-grow1 c-w0">
                <span class="theme-fc c-fs22" v-if="item.detailInfo.permission == 21">加密</span>
                <span class="theme-fc" :class="item.detailInfo.price==0?'c-fs22':'c-fs24'" v-if="item.detailInfo.permission != 21"><span class="c-fs24">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
              </div>
              <span class="c-fs20 c-fc-gray">{{item.detailInfo.downloadTimes}}次下载</span>
            </template>
            <!-- 电子书 -->
            <template v-if="item.prodType == ckFrom.ebooks">
              <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1">
                <div class="c-fs24 c-lh28 c-flex-row c-aligni-end c-text-ellipsis2 c-fc-xblack">
                  <span>{{item.detailInfo.name}}</span>
                </div>
                <div class="c-fs20 c-fc-sblack c-mt16 c-text-ellipsis1">{{item.detailInfo.author}}</div>
                <div class="c-flex-row c-justify-sb c-mt20 c-aligni-center">
                  <div v-if="item.detailInfo.isSaleOnly == 0" class="theme-fc c-lh c-fs22">关联售卖</div>
                  <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                    <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                  </div>
                  <span v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType))" class="c-fs18 c-fc-sblack c-lh">{{item.detailInfo.viewNum | formatNumber}}次阅读</span>
                </div>
              </div>
            </template>
            <!-- 商城商品 -->
            <template v-if="item.prodType == ckFrom.shopping">
              <div class="c-fs24">
                <span>{{'￥' | iosPriceFilter}}</span>
                <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
              </div>
              <div class="c-fs20 c-fc-gray">{{item.detailInfo.sales | formatTenThousand}}人已买</div>
            </template>
          </div>
        </div>
      </div>
    </section>
    <section class="c-ph24 c-pb20 c-pt28 c-flex-row c-flexw-wrap c-justify-sb c-aligni-start c-pt160" v-show="courseList.length > 0 && styleType == 2">
      <water-fall v-model="courseList" ref="waterfall">
        <template v-slot:list="{list}">
          <div
            class="c-bg-white c-br10 c-text-hidden c-mb20 c-pb20 c-ww288"
            v-for="(item,index) in list"
            :key="index"
            @click="clickDetailItem(item)"
          >
            <div class="c-ww288 c-p c-text-hidden">
              <div class="c-w100 c-maxh432 c-center" v-if="item.prodType == 10">
                <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
                <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.prodAvatar, require('@/assets/no_chat_img.png'))" alt="" />
                <div class="c-br8 c-fs18 c-fc-white c-ph6 c-lh28 c-textAlign-c c-inlineblack c-translucent-balck60 c-p-b8 c-p-r8 c-pa">社群</div>
              </div>
              <div class="c-w100 c-maxh432 c-center" v-else-if="item.prodType == 8">
                <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
                <img class="c-w100 c-h imgCloseBig" :src="$addXossFilter(item.prodAvatar, require('@/assets/i/wap/datum/datumsDefault.png'))" alt="" />
                <div class="c-br8 c-fs18 c-fc-white c-ph6 c-lh28 c-textAlign-c c-inlineblack c-translucent-balck60 c-p-b8 c-p-r8 c-pa">资料</div>
              </div>
              <div class="c-w100 c-maxh432" v-else>
                <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.prodAvatar, require('@/assets/defult270.png'))" alt="" />
                <template>
                  <div class="c-pa c-p-b8 c-p-r8 c-inlineblack">
                    <div class="c-br8 c-fs18 c-fc-white c-ph6 c-hh28 c-textAlign-c c-block c-translucent-balck60">{{prodNameMap[Number(item.prodType)]}}</div>
                  </div>
                  <vip-status v-if="showVipBadge == 1" :item="item"></vip-status>
                </template>
                <template v-if="item.prodType == 115">
                  <div v-if="item.detailInfo.limitNum-item.detailInfo.saleNum<=0" class="c-pa c-p-b0 c-p-l0 c-pz1 c-flex-row c-translucent-balck60 c-w100 c-p-t0">
                    <img src="../../../assets/i/wap/course/buynone.png" alt="" class="c-ww80 c-hh80 c-pa c-p-tp50 c-p-r0 c-p-l0 c-pz1 c-center c-mt-40" />
                  </div>
                </template>
              </div>
            </div>
            <div class="c-fs24 c-lh32 c-flex-row c-aligni-end c-text-ellipsis2 c-fc-xblack c-mt16 c-ph12">
              <span v-if="item.prodType == 7" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-vcAlign-middle c-mr10" :class="item.detailInfo.enrollStatus==2 || item.detailInfo.status==2 ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.enrollStatus==2?'已结束':(item.detailInfo.status==1?'报名中':(item.detailInfo.status==0?'即将报名':(item.detailInfo.status==2?'报名截止':'已结束')))}}</span>
              <span v-if="item.prodType == 78" class="c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-vcAlign-middle c-mr10" :class="(item.detailInfo.joinMode == 2 && item.detailInfo.status == -1) || (item.detailInfo.joinMode == 1 && item.detailInfo.termStatus==5) ? 'c-bg-b3' : 'c-bg-vgreen'">{{item.detailInfo.joinMode == 2 ? (item.detailInfo.status == -1 ? '不招生/开课' : '招生中/开课中') : termStatus[item.detailInfo.termStatus]}}</span>
              <span v-if="item.prodType == 53 && item.detailInfo.enrollCount > 0" class="c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-vcAlign-middle c-mr10">{{item.detailInfo.enrollCount | formatNumber}}次预约</span>
              <span v-if="item.detailInfo.isUpdating == 1 && item.prodType == 9 && enableColumnRelates == 1" class="c-bg-vgreen c-fs16 c-fc-white c-ph6 c-pv2 c-textAlign-c c-br-tl8 c-br-br8 c-vcAlign-middle c-mr10">更新中</span>
              <span>{{item.prodName}}</span>
            </div>
            <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType == 110 || item.prodType == 111 || item.prodType == 112 ? 5 : item.prodType))" class="theme-fc c-mt24 c-ph12">
              <template v-if="item.prodType == 110 || item.prodType == 111 || item.prodType == 112">
                <div class="c-flex-row c-aligni-center">
                  <div class="c-fs20 c-lh28 c-fc-gray" v-if="item.prodType == 111">{{item.detailInfo.plays | formatNumber}}人收听</div>
                  <div class="c-fs20 c-lh28 c-fc-gray" v-else>{{item.detailInfo.plays | formatNumber}}人观看</div>
                </div>
              </template>
              <template v-if="item.prodType == 9 || item.prodType == 61 || item.prodType == 53">
                <div class="c-fs20 c-lh28 c-fc-gray" v-if="(item.prodType == 53) && Number(item.detailInfo.price) != 0 && item.detailInfo.isShowOrder == 1">{{item.detailInfo.orderCount | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
                <div class="c-fs20 c-lh28 c-fc-gray" v-if="(item.prodType == 9) && item.detailInfo.payType == 2 ">{{item.detailInfo.initSales | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
                <div class="c-fs20 c-lh28 c-fc-gray" v-if="(item.prodType == 61) && item.detailInfo.payType == 2">{{item.detailInfo.sales | formatNumber}}{{ !$isWxAppIos() ? '人购买' : '人观看' }}</div>
                <div class="c-fs20 c-lh28 c-fc-gray" v-if="item.prodType == 9 && item.detailInfo.payType != 2">{{item.detailInfo.clicks | formatNumber}}人观看</div>
                <div class="c-fs20 c-lh28 c-fc-gray" v-if="item.prodType == 61 && item.detailInfo.payType != 2">{{item.detailInfo.visits | formatNumber}}人观看</div>
              </template>
              <template v-if="item.prodType == 78 || item.prodType == 41">
                <div class="c-fs20 c-lh28 c-fc-gray">{{item.prodType == 78 ? item.detailInfo.people : item.detailInfo.hasMan}}人参与</div>
              </template>
              <template v-if="item.prodType == 7">
                <div v-if="item.detailInfo.isShowEnroll == 1" class="c-fs20 c-lh28 c-fc-gray">{{item.detailInfo.enrollTicket}}人已报名</div>
              </template>
              <template v-if="item.prodType == 51||item.prodType == 180">
                <div class="c-fs20 c-fc-gray">{{item.prodType == 51?statusMap[item.detailInfo.status]:item.prodType == 180&&item.detailInfo.status==1?statusMap[item.detailInfo.status]:''}}</div>
              </template>
              <template v-if="item.prodType == 115 && item.detailInfo && item.detailInfo.isHideLimit != 1">
                <div class="c-fs20 c-lh28 c-fc-gray">剩{{item.detailInfo.limitNum-item.detailInfo.saleNum}}名额</div>
              </template>
              <template v-if="item.prodType == 10&&socialRoomConfs.isShowPeopleNumber==1">
                <div class="c-fs20 c-fc-gray">{{item.detailInfo.number}}个群成员</div>
              </template>
              <template v-if="item.prodType == 11">
                <div class="c-flex-row c-aligni-end">
                  <span class="c-fs20 c-fc-gray" v-if="!item.detailInfo.showTime">
                    考试{{item.detailInfo.hasPaper}}套 | {{item.detailInfo.price * 1 > 0 ? setIosText():'已测'}}{{item.detailInfo.subscribers}}
                  </span>
                  <span class="c-fs20 c-fc-gray" v-if="item.detailInfo.showTime">
                    考试{{item.detailInfo.hasPaper}}套 | {{item.detailInfo.time}}
                  </span>
                </div>
              </template>
              <template v-if="item.prodType == 125">
                <div class="c-fs20 c-fc-gray">{{item.detailInfo.type==2?'小测试':'考试'}} | {{item.detailInfo.joinNumber}}人参与</div>
              </template>
              <template v-if="item.prodType == 129">
                <div class="c-fs20 c-fc-gray">练习 | 内含{{item.detailInfo.questionNum}}题</div>
              </template>
              <template v-if="item.prodType == 77">
                <div class="c-fs20 c-fc-gray" v-if="item.detailInfo.payType == 2 && Number(item.detailInfo.price) != 0">{{setIosText()}}{{item.detailInfo.subscribers | formatNumber}}</div>
                <div class="c-fs20 c-fc-gray" v-else>已测{{item.detailInfo.hasTestNum | formatNumber}}</div>
              </template>
              <template v-if="item.prodType == 75">
                <div class="c-fs20 c-fc-gray" v-if="item.detailInfo.payType == 2 && Number(item.detailInfo.price) != 0">{{setIosText()}}{{item.detailInfo.subscribers | formatNumber}}</div>
                <div class="c-fs20 c-fc-gray" v-else>已测{{item.detailInfo.hasTestNum | formatNumber}}</div>
              </template>
              <template v-if="item.prodType == 8">
                <div class="c-fs20 c-fc-gray">{{item.detailInfo.downloadTimes}}次下载</div>
              </template>
              <template v-if="item.prodType == 12">
                <div class="c-fs20 c-fc-gray">{{item.detailInfo.sales | formatTenThousand}}人已买</div>
              </template>
            </div>
            <div class="theme-fc c-mt24 c-ph12">
              <!-- 视音频图文 -->
              <template v-if="item.prodType == ckFrom.video || item.prodType == ckFrom.voice || item.prodType == ckFrom.imgText">
                <div class="c-fs22" v-if="item.detailInfo.isSaleOnly != 1">关联售卖</div>
                <template v-else>
                  <div class="c-flex-row c-aligni-end c-pr10 c-fs24">
                    <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                      <span v-if="item.detailInfo.payType==2">{{'￥' | iosPriceFilter}}</span>
                      <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, ckFrom.course, item.detailInfo.optimal, 'index')}}</span>
                      <span class="c-fs20" v-if="(item.prodType == 110 || item.prodType == 111) && item.detailInfo.payType == 2 && item.previewLabel">/{{item.prodType == 110 ? '支持试看' : '支持试听'}}</span>
                    </span>
                    <span class="c-fs22" v-if="item.detailInfo.hasCourse > 0">{{item.detailInfo.isUpdating == 1 ? '/含' : '/共'}}{{item.detailInfo.hasCourse}}节</span>
                  </div>
                </template>
              </template>
              <!-- 专栏、知识套餐、约课 -->
              <template v-if="item.prodType == ckFrom.column || item.prodType == ckFrom.package || item.prodType == ckFrom.reservation">
                <div class="c-fs24">
                  <div v-if="item.detailInfo.isSaleOnly == 0" class="c-fs22">关联售卖</div>
                  <template v-else>
                    <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                      <span v-if="item.detailInfo.payType==2">{{'￥' | iosPriceFilter}}</span>
                      <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, ckFrom.course, item.detailInfo.optimal, 'index')}}</span>
                    </span>
                  </template>
                </div>
              </template>
              <!-- 训练营、打卡 -->
              <template v-if="item.prodType == ckFrom.camp || item.prodType == ckFrom.clockIn">
                <span :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </span>
              </template>
              <!-- 活动 -->
              <template v-if="item.prodType == ckFrom.activity">
                <div class="c-fs24" v-if="item.detailInfo.price && item.detailInfo.isShowPrice == 1 && !$isWxAppIos()">
                  <span class="c-fs24" v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1] || Number(item.detailInfo.price.split('~')[0]) !=0">
                    <span>{{'￥' | iosPriceFilter}}</span>
                    <span v-if="item.detailInfo.price.split('~')[0]!=item.detailInfo.price.split('~')[1]">{{item.detailInfo.price.split('~')[0]}}起</span>
                    <span v-else>{{item.detailInfo.price.split('~')[1]}}</span>
                  </span>
                  <span class="c-fs22" v-if="item.detailInfo.price.split('~')[0]==item.detailInfo.price.split('~')[1] && (Number(item.detailInfo.price.split('~')[0])==0)">免费</span>
                </div>
              </template>
              <!-- 商城商品 -->
              <template v-if="item.prodType == ckFrom.shopping">
                <div class="c-fs24">
                  <span>{{'￥' | iosPriceFilter}}</span>
                  <span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                </div>
              </template>
              <!-- 公开课、直播间 -->
              <template v-if="item.prodType == ckFrom.live || item.prodType == ckFrom.personalLive">
                <div v-if="item.detailInfo.isSaleOnly == 0" class="c-fs22">关联售卖</div>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                  <span class="c-fs20" v-if="(item.prodType == 51 || item.prodType == 180) && item.detailInfo.payType == 2 && item.detailInfo.isWatchTime">/支持试看</span>
                </div>
              </template>
              <!-- 小班课 -->
              <template v-if="item.prodType == ckFrom.privateClass">
                <div v-if="(item.detailInfo.payType == 1 && item.detailInfo.price * 1 == 0)||item.detailInfo.payType == 4" class="c-fs22">{{item.detailInfo.payType == 4?"审核参与":"免费"}}<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
                <div v-else-if="item.detailInfo.payType == 3" class="c-fs22">加密<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
                <div v-else class="c-fs24">{{'￥' | iosPriceFilter}}{{item.detailInfo.price | moneyStr}}<span class="c-fs22">/共{{item.detailInfo.detailNum}}节</span></div>
              </template>
              <!-- 社群 -->
              <template v-if="item.prodType == ckFrom.social">
                <div v-if="item.detailInfo.isSaleOnly == 0" class="c-fs22">关联售卖</div>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </div>
              </template>
              <!-- 测评考试、练习 -->
              <template v-if="item.prodType == ckFrom.testpPaper || item.prodType == ckFrom.itemBank">
                <div v-if="item.detailInfo.isSaleOnly == 0" class="theme-fc c-fs22">关联售卖</div>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </div>
              </template>
              <!-- 测评、语音测评、交互测评 -->
              <template v-if="item.prodType == ckFrom.exam || item.prodType == ckFrom.voiceTest || item.prodType == ckFrom.mutuaTest">
                <span class="theme-fc c-fs22" v-if="item.detailInfo.isSaleOnly != 1">关联售卖</span>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </div>
              </template>
              <!-- 资料 -->
              <template v-if="item.prodType == ckFrom.datum">
                <span class="c-flex-grow1 c-fs22 c-w0" v-if="item.detailInfo.isSaleOnly == 0">关联售卖</span>
                <span class="c-flex-grow1 c-fs22 c-w0" v-else-if="item.detailInfo.permission == 19">免费</span>
                <div class="c-fs24" v-else>
                  <span class="theme-fc c-fs22" v-if="item.detailInfo.permission == 21">加密</span>
                  <span class="theme-fc" :class="item.detailInfo.price==0?'c-fs22':'c-fs24'" v-if="item.detailInfo.permission != 21"><span class="c-fs24">{{'￥' | iosPriceFilter('Datum')}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}</span>
                </div>
              </template>
              <!-- 电子书 -->
              <template v-if="item.prodType == ckFrom.ebooks">
                <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType))" class="c-fs20 c-fc-gray c-mt12 c-text-ellipsis1">{{item.detailInfo.viewNum | formatNumber}}次阅读</div>
                <div class="c-fs20 c-fc-sblack c-mt12 c-text-ellipsis1">{{item.detailInfo.author}}</div>
                <div v-if="item.detailInfo.isSaleOnly == 0" class="theme-fc c-lh c-fs22">关联售卖</div>
                <div v-else :class="item.detailInfo.payType == 2 ? 'c-fs24' : 'c-fs22'">
                  <span v-if="item.detailInfo.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.detailInfo.payType | priceValueFilter(item.detailInfo.price, item.prodType, item.detailInfo.optimal, 'index')}}
                </div>
              </template>
            </div>
          </div>
        </template>
      </water-fall>
    </section>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无结果"></loading-status-tem>
    <!-- 下拉筛选 -->
    <course-screen ref="courseCreen" @handleClickCloseSelect="handleClickCloseSelect" @swichMenu="swichMenu" @swichMenu2="swichMenu2" @swichMenu3="swichMenu3" :firstIndex="firstIndex" :twoIndex="twoIndex" :threeIndex="threeIndex" :cateId1="cateId1" :cateId2="cateId2" :cateId3="cateId3" :firstList="firstList" :twoList="twoList" :threeList="threeList" :isShow="isShow" @handleClickSubmit="handleClickSubmit"></course-screen>
  </div>
</template>

<script>
import { goDetails } from "@/utils/goDetails.js"
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import waterFall from "@/components/templates/common/waterfall.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import courseScreen from "@/components/homePage/course/courseScreen.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import { utilJs } from "@/utils/common.js";
let pageIndex = 1;
export default {
  name: "CatDetailList",
  components: {
    loadingStatusTem,
    newSearchBar,
    courseScreen,
    waterFall,
    vipStatus
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      searchText: "",
      parentId: 0,
      childId: 0,
      name: '',
      dataInfo: "",
      courseList: [],
      dataStatus: 'HAS_MORE_DATA',
      cateId1: 0,
      cateId2: 0,
      cateId3: 0,
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束"
      },
      prodNameMap: global.prodMapType,
      typeArr: [
        {name: '视频', typeId: '110'},
        {name: '音频', typeId: '111'},
        {name: '图文', typeId: '112'},
        {name: '专栏', typeId: '9'},
        {name: '知识套餐', typeId: '61'},
        {name: '训练营', typeId: '78'},
        {name: '社群', typeId: '10'},
        {name: '活动', typeId: '7'},
        {name: '公开课', typeId: '51'},
        {name: '直播间', typeId: '180'},
        {name: '小班课', typeId: '115'},
        {name: '打卡', typeId: '41'},
        {name: '约课', typeId: '53'},
        {name: '测评', typeId: '11'},
        {name: '考试', typeId: '125'},
        {name: '练习', typeId: '129'},
        {name: 'AI测试', typeId: '77'},
        {name: '互动测评', typeId: '75'},
        {name: '资料', typeId: '8'},
        {name: '电子书', typeId: '142'},
        {name: '实体商城', typeId: '12'},
      ],
      enableProdTypeSelect: false,
      prodTypeArr: [],
      prodCount: 0,
      showTypes: false,
      selectedType: 0,
      selectedName: '类型',
      styleType: 1, //1: 单列 2：双列
      cfg: JSON.parse(localStorage.getItem("cfg")),
      isShow: false,
      firstList: [],
      twoList: [],
      threeList: [],
      firstIndex: 0,
      twoIndex: 0,
      threeIndex: 0,
      enableShow: 1,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      enableColumnRelates: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableColumnRelates : 1,
      ckFrom: global.ckFrom,
      showVipBadge: 1,
      socialRoomConfs:'',
      termStatus: {
        1: '待招生',
        2: '招生中',
        3: '待开课',
        4: '开课中',
        5: '已结束',
        6: '招生中/开课中',
      }
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    //获取社群配置
    getSocialRoomConfs() {
      utilJs.getMethod(`${global.apiurl}socialRoomExtend/getSocialRoomConfs`,
      res => {
        this.socialRoomConfs = res
      })
    },
    setIosText() {
      return this.$isWxAppIos() ? '已测' : '已售'
    },
    handleClickCloseSelect() {
      this.isShow = false;
    },
    swichMenu(catId, index, name) {
      this.cateId1 = catId;
      this.cateId2 = 0;
      this.cateId3 = 0;
      this.firstIndex = index;
      this.twoIndex = -1;
      this.threeIndex = -1;
      this.name = name;
      this.getChildCategory(catId).then(res => {
        this.twoList = res;
        this.threeList = [];
      })
    },
    swichMenu2(catId, index, name) {
      if (index == this.twoIndex) {
        this.twoIndex = -1;
        this.threeIndex = -1;
        this.threeList = [];
        this.cateId2 = 0;
        this.cateId3 = 0;
        this.firstList.forEach((element, index) => {
          if (this.cateId1 == element.catId) {
            this.name = element.name;
          }
        })
        return;
      }
      this.cateId2 = catId;
      this.cateId3 = 0;
      this.twoIndex = index;
      this.threeIndex = -1;
      this.name = name;
      this.getChildCategory(catId).then(res => {
        this.threeList = res;
      })
    },
    swichMenu3(catId, index, name) {
      if (index == this.threeIndex) {
        this.threeIndex = -1;
        this.cateId3 = 0;
        this.twoList.forEach((element, index) => {
          if (this.cateId2 == element.catId) {
            this.name = element.name;
          }
        })
        return;
      }
      this.threeIndex = index;
      this.cateId3 = catId;
      this.name = name;
    },
    handleClickSubmit() {
      this.isShow = false;
      pageIndex = 1;
      this.courseList = [];
      this.$refs.waterfall.clear();
      setDocumentTitle(this.name);// eslint-disable-line
      this.wechatShare();
      this.appShare();
      this.getMoreC();
      this.handleClickDetail(this.cateId1, this.cateId2, this.cateId3, this.name);
    },
    handleClickDetail(cateId1, cateId2, cateId3, name) {
      let toPath = `/homePage/course/catDetailList?cateId1=${cateId1}&cateId2=${cateId2}&cateId3=${cateId3}&name=${name}`;
      this.$routerGo(this, "replace", {
        path: toPath
      });
    },
    initselectList() {
      this.getCategoryByLevel().then(res => {
        this.firstList = res;
        // this.cateId1 = this.cateId1 != 0 ? this.cateId1 : res[0].catId;
        res.forEach((element, index) => {
          if (this.cateId1 == element.catId) {
            this.firstIndex = index;
          }
        });
        this.getChildCategory(this.cateId1).then(res => {
          this.twoList = res;
          // this.cateId2 = this.cateId2 != 0 ? this.cateId2 : res[0].catId;
          res.forEach((element, index) => {
            if (this.cateId2 == element.catId) {
              this.twoIndex = index;
            }
          })
          if (this.cateId3 != 0 || this.twoIndex != -1) {
            this.getChildCategory(this.cateId2).then(res => {
              this.threeList = res;
              // this.cateId3 = this.cateId3 != 0 ? this.cateId3 : res[0].catId;
              res.forEach((element, index) => {
                if (this.cateId3 == element.catId) {
                  this.threeIndex = index;
                }
              })
            })
          }
        })
        this.wechatShare();
      })
    },
    handleClickSelectCourse() {
      this.isShow = true;
      this.$refs.courseCreen.scrollLeftView(this.firstIndex, '.menu-scroll-view', '.menu-tab-item', 'scrollTop');
      this.$refs.courseCreen.scrollLeftView(this.twoIndex, '.menu-scroll-view2', '.menu-tab-item2', 'scrollTop2');
      this.$refs.courseCreen.scrollLeftView(this.threeIndex, '.menu-scroll-view3', '.menu-tab-item3', 'scrollTop3');

    },
    getCategoryByLevel() {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/getCategoryByLevel/1`, res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    getChildCategory(parentId) {
      return new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + `courses/getChildCategory?parentId=${parentId}`, res => {
          resolve(res)
        }, failRes => {
          reject(failRes)
        })
      })
    },
    changeStyleType(type) {
      this.styleType = type;
      this.$forceUpdate();
    },
    selectProdType(typeId, tIndex) {
      this.searchText = "";
      this.selectedName = this.typeArr[tIndex].name;
      this.showTypes = false;
      this.selectedType = typeId;
      pageIndex = 1;
      this.courseList = [];
      this.$refs.waterfall.clear();
      this.getMoreC();
    },
    showType() {
      this.showTypes = !this.showTypes;
    },
    //通过类别名称模糊搜索
    startSearch(e) {
      this.searchText = e.searchValue;
      pageIndex = 1;
      this.courseList = [];
      this.$refs.waterfall.clear();
      this.getMoreC();
    },
    //分页获取分类列表
    getMoreC() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let cUrl = `${global.apiurl}courses/v2/courseListInCategory?level1CatId=${this.cateId1}&level2CatId=${this.cateId2}&level3CatId=${this.cateId3}&prodName=${this.searchText}&page=${pageIndex}&limit=10&prodType=${this.selectedType}`//`${global.apiurl}courses/categories?parentId=${this.parentId}&childId=${this.childId}&name=${this.searchText}&page=${pageIndex}`;
      utilJs.getMethod(cUrl, (res) => {
        let courseListTmp = [];
        if (res.list.data && res.list.data.length > 0) {
          courseListTmp = res.list.data.filter(function (cItem) {
            return cItem.isShow == 1;
          })
        }
        if (res.listType != 1) {
          if (pageIndex == 1) {
            this.courseList = courseListTmp;
            this.prodCount = res.total;
          } else {
            this.courseList = [...this.courseList, ...courseListTmp];
          }
          if (!res.list.next_page_url) {
            this.dataStatus = res.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            pageIndex++;
          }
        }
      });
    },
    //跳转到课程详情
    clickCourseItem(courseId, type) {
      switch (type) {
        case 0:
          this.$routerGo(this, "push", {
            path: "/homePage/course/video",
            query: { courseId: courseId, extId: -1, ckFrom: global.ckFrom.course }
          });
          break;
        case 1:
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: { courseId: courseId, extId: -1, ckFrom: global.ckFrom.course }
          });
          break;
        case 2:
          this.$routerGo(this, "push", {
            path: "/homePage/course/imgText",
            query: { courseId: courseId, extId: -1, ckFrom: global.ckFrom.course }
          });
          break;
      }
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.courseList.length > 0) {
          this.getMoreC();
        }
      });
    },
    clickDetailItem(tItem) {
      let courseType = tItem.prodType == 110 ? 0 : tItem.prodType == 111 ? 1 : tItem.prodType == 112 ? 2 : '';
      let prodType = tItem.prodType == 110 || tItem.prodType == 111 || tItem.prodType == 112 ? global.ckFrom.course : tItem.prodType;
      goDetails(this, prodType, tItem.prodId, '', courseType)
    },
    //分享
    wechatShare: function () {
      let title = this.name || '商品分组';
      let name = encodeURIComponent(this.name);
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cateId1=${this.cateId1}&cateId2=${this.cateId2}&cateId3=${this.cateId3}&refereeId=${localStorage.getItem("userId")}&name=${name}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.name || '商品分组';
      let name = encodeURIComponent(this.name);
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?cateId1=${this.cateId1}&cateId2=${this.cateId2}&cateId3=${this.cateId3}&refereeId=${localStorage.getItem("userId")}&name=${name}`;
      let shareDesc = window.localStorage.getItem("shareDesc") || '点击查看详情';
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    this.courseList = [];
    this.searchText = "";
    this.parentId = this.$route.query.parentId || '';
    this.childId = this.$route.query.childId || '';
    this.prodCount = 0;
    this.showTypes = false;
    this.selectedType = 0;
    this.selectedName = '类型';
    this.styleType = this.cfg ? (this.cfg.categoryListType == 1 ? 1 : 2) : 1;
    pageIndex = 1;
    this.dataStatus = 'HAS_MORE_DATA';

    this.cateId1 = this.$route.query.cateId1;
    this.cateId2 = this.$route.query.cateId2 ? this.$route.query.cateId2 : 0;
    this.cateId3 = this.$route.query.cateId3 ? this.$route.query.cateId3 : 0;
    this.name = this.$route.query.name || '';
    this.firstList = [];
    this.twoList = [];
    this.threeList = [];
    this.firstIndex = -1;
    this.twoIndex = -1;
    this.threeIndex = -1;
    this.isShow = false;
    if (this.name) {
      setDocumentTitle(this.name);// eslint-disable-line
    } else {
      setDocumentTitle("商品分组");// eslint-disable-line
    }
    utilJs.getMethod(global.apiurl + "courses/v2/categoryConfs", res => {
      this.enableProdTypeSelect = res.enableProdTypeSelect;
      this.prodTypeArr = res.prodTypeArr;
      this.enableShow = res.enableShow;
      this.showVipBadge = res.catVipBadge;
      this.typeArr = this.typeArr.filter((item) => {
        return this.prodTypeArr.includes(item.typeId);
      })
      if (this.typeArr.length > 0) {
        this.typeArr.unshift({name: '全部', typeId: '0'});
      }
      this.$nextTick(() => {
        this.$refs.waterfall.clear();
      })
      this.getMoreC();
    })
    this.initselectList();
    this.getSocialRoomConfs()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    this.isShow = false;
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.first-cate.active {
  background-color: #fff;
}
.vux-drawer {
  background-color: #f3f3f3;
}
.icon-course-mark {
  position: absolute;
  bottom: 0;
  right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}
.vipStatus {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.c-mt-40 {
  margin-top: -1rem;
}
.c-bd1-xsgray{
  border: 0.02rem solid #f6f6f6;
  box-sizing: border-box;
}
.mt{
    margin-top: -0.5rem;
}
.c-br-tl4 {
  border-top-left-radius: 0.1rem;
}
.prodType-triangle {
  width: 0;
  height: 0;
  border-width: 0.2rem 0.2rem 0 0.2rem;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
  bottom: 0;
  right: 0;
}
.selectIcon_a:after {
  position: absolute;
  top: 0;
  left: .8rem;
  width: 0.05rem;
  height: 100%;
  background-color: #f2f2f2;
  content: "";
}
.selectIcon_b:before {
  position: absolute;
  top: 0;
  right: .8rem;
  width: 0.05rem;
  height: 100%;
  background-color: #f2f2f2;
  content: "";
}
.fixTop {
  position: fixed;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  left: 0;
  right: 0;
  max-width: 16rem;
  margin: 0 auto;
}
</style>